<template>
  <!-- 规格弹窗 -->
  <su-popup :show="authType !== ''"
            round="10"
            :backgroundColor="authType !== 'textView' ? '#FFFFFF':'#FFFFFF'"
            :showClose="authType !== 'textView' && authType !== 'addFriend'"
            @close="closeAuthModal"
  >
    <view class="login-wrap" v-if="authType !== 'textView' && authType !== 'addFriend'">
      <!-- 1. 账号密码登录 accountLogin -->
      <account-login
        v-if="authType === 'accountLogin'"
        :agreeStatus="state.protocol"
        @onConfirm="onConfirm"
      />

      <!-- 2.短信登录  smsLogin -->
      <sms-login v-if="authType === 'smsLogin'" :agreeStatus="state.protocol" @onConfirm="onConfirm" />

      <!-- 3.短信注册 smsRegister-->
      <sms-register
        v-if="authType === 'smsRegister'"
        :agreeStatus="state.protocol"
        @onConfirm="onConfirm"
      />

      <!-- 4.忘记密码 resetPassword-->
      <reset-password v-if="authType === 'resetPassword'" />

      <!-- 5.绑定手机号 changeMobile -->
      <change-mobile v-if="authType === 'changeMobile'" />

      <!-- 6.修改密码 changePassword-->
      <change-passwrod v-if="authType === 'changePassword'" />

      <!-- 7.修改用户名 changeUsername-->
      <change-username v-if="authType === 'changeUsername'" />

      <!-- 8.微信小程序授权 changeUsername-->
      <mp-authorization v-if="authType === 'mpAuthorization'" />

      <!-- 第三方登录+注册 -->
      <view
        v-if="['accountLogin', 'smsLogin'].includes(authType)"
        class="auto-login-box ss-flex ss-flex-col ss-row-center ss-col-center"
      >
        <!-- 立即注册&快捷登录 TextButton -->
        <view v-if="sheep.$platform.name === 'WechatMiniProgram'" class="ss-flex register-box">
          <!--                <view class="register-title">还没有账号?</view>-->
          <!--                <button class="ss-reset-button register-btn" @tap="showAuthModal('smsRegister')"-->
          <!--                >立即注册-->
          <!--                </button-->
          <!--                >-->
          <!--                <view class="or-title">或</view>-->
          <!--                <button class="ss-reset-button login-btn" @tap="thirdLogin('wechat')">快捷登录</button>-->
          <button v-if="state.protocol"
                  class="ss-reset-button login-btn wechatButton"
                  open-type="getPhoneNumber"
                  @getphonenumber="getPhoneNumber"
          >
            手机号快捷登录
          </button>
          <button v-else
                  class="ss-reset-button login-btn wechatButton"
                  @click="thirdLogin('watch')"
          >
            手机号快捷登录
          </button>
        </view>

        <!--              <button-->
        <!--                v-if="sheep.$platform.name !== 'WechatMiniProgram'"-->
        <!--                class="ss-reset-button type-btn"-->
        <!--                @tap="showAuthModal('smsRegister')"-->
        <!--              >-->
        <!--                立即注册-->
        <!--              </button>-->

        <!--              &lt;!&ndash; 公众号|App微信登录 &ndash;&gt;-->
        <!--              <button-->
        <!--                v-if="-->
        <!--                  ['WechatOfficialAccount', 'App'].includes(sheep.$platform.name) &&-->
        <!--                  sheep.$platform.isWechatInstalled-->
        <!--                "-->
        <!--                @tap="thirdLogin('wechat')"-->
        <!--                class="ss-reset-button auto-login-btn"-->
        <!--              >-->
        <!--                <image-->
        <!--                  class="auto-login-img"-->
        <!--                  :src="sheep.$url.static('/assets/addons/shopro/uniapp/platform/wechat.png')"-->
        <!--                ></image>-->
        <!--              </button>-->

        <!--              &lt;!&ndash; iOS登录 &ndash;&gt;-->
        <!--              <button-->
        <!--                v-if="sheep.$platform.os === 'ios' && sheep.$platform.name === 'App'"-->
        <!--                @tap="thirdLogin('apple')"-->
        <!--                class="ss-reset-button auto-login-btn"-->
        <!--              >-->
        <!--                <image-->
        <!--                  class="auto-login-img"-->
        <!--                  :src="sheep.$url.static('/assets/addons/shopro/uniapp/platform/apple.png')"-->
        <!--                ></image>-->
        <!--              </button>-->
      </view>

      <view
        v-if="['accountLogin', 'smsLogin', 'smsRegister'].includes(authType)"
        class="agreement-box ss-flex ss-row-center"
        :class="{ shake: currentProtocol }"
      >
        <label class="radio ss-flex ss-col-center" @tap="onChange">
          <radio
            :checked="state.protocol"
            color="var(--ui-BG-Main)"
            style="transform: scale(0.8)"
            @tap.stop="onChange"
          />
          <view class="agreement-text ss-flex ss-col-center ss-m-l-8">
            我已阅读并遵守
            <view
              class="tcp-text"
              @tap.stop="onProtocol(appInfo.user_protocol.id, appInfo.user_protocol.title)"
            >
              《{{ appInfo.user_protocol.title }}》
            </view>
            <view class="agreement-text">与</view>
            <view
              class="tcp-text"
              @tap.stop="onProtocol(appInfo.privacy_protocol.id, appInfo.privacy_protocol.title)"
            >
              《{{ appInfo.privacy_protocol.title }}》
            </view>
          </view>
        </label>
      </view>
      <view class="safe-box"></view>
    </view>
    <view class="user-warp flex flex-column align-center" v-else-if="authType === 'addFriend'">
      <add-friend></add-friend>
    </view>
    <!-- 9.内容介绍 -->
    <view class="user-warp flex flex-column align-center" v-else>
      <text-view></text-view>
    </view>
  </su-popup>
</template>

<script setup>
  import { computed, reactive, ref, watch } from 'vue';
  import sheep from '@/sheep';
  import accountLogin from './components/account-login.vue';
  import smsLogin from './components/sms-login.vue';
  import smsRegister from './components/sms-register.vue';
  import resetPassword from './components/reset-password.vue';
  import changeMobile from './components/change-mobile.vue';
  import changePasswrod from './components/change-password.vue';
  import changeUsername from './components/change-username.vue';
  import mpAuthorization from './components/mp-authorization.vue';
  import { closeAuthModal, showAuthModal } from '@/sheep/hooks/useModal';
  import TextView from '@/sheep/components/s-auth-modal/components/text-view.vue';
  import AddFriend from '@/sheep/components/s-auth-modal/components/add-friend.vue';

  const appInfo = computed(() => sheep.$store('app').info);

  const modalStore = sheep.$store('modal');

  // 授权弹窗类型
  const authType = computed(() => modalStore.auth);

  const state = reactive({
    protocol: false,
  });

  const currentProtocol = ref(false);

  //勾选协议
  function onChange() {
    state.protocol = !state.protocol;
  }

  // 查看协议
  function onProtocol(id, title) {
    closeAuthModal();
    sheep.$router.go('/pages/public/richtext', {
      id,
      title,
    });
  }

  // 点击登录/注册事件
  function onConfirm(e) {
    currentProtocol.value = e;
    setTimeout(() => {
      currentProtocol.value = false;
    }, 1000);
  }

  // 第三方授权登陆
  const thirdLogin = async (provider) => {
    if (!state.protocol) {
      // TODO：协议div晃动效果
      currentProtocol.value = true;
      setTimeout(() => {
        currentProtocol.value = false;
      }, 1000);
      sheep.$helper.toast('请勾选同意');
      return;
    }
    const loginRes = await sheep.$platform.useProvider(provider).login();
    if (loginRes) {
      closeAuthModal();
      const userInfo = await sheep.$store('user').getInfo();
      await sheep.$store('AI').setAllSessionList();
      await sheep.$store('AI').setAllFollowList();
      const bind_id = computed(() => sheep.$store('AI').bind_id);
      const bind_family_id = computed(() => sheep.$store('AI').bind_family_id);
      if (!!bind_id.value) {
        await sheep.$api.user.bindParent({ parent_id: bind_id.value });
      }
      if (!!bind_family_id.value && !!isLogin.value) {
        const { code } = await sheep.$api.family.applyFamily({ family_id: bind_family_id.value });
        if (code == 1) {
          sheep.$store('AI').setBindFamilyId('');
        }
      }
      // 触发小程序授权信息弹框
      // #ifdef MP-WEIXIN
      if (userInfo.third_oauth.length > 0) {
        const mpThirdOauthInfo = userInfo.third_oauth.find(
          (item) => item.platform === 'miniProgram',
        );
        console.log(!!mpThirdOauthInfo, !mpThirdOauthInfo.nickname);
        if (!!mpThirdOauthInfo && !mpThirdOauthInfo.nickname) {
          showAuthModal('mpAuthorization');
        }
      }
      // #endif
    }
  };

  // 使用微信手机号
  async function getPhoneNumber(e) {
    console.log(e);
    if (e.detail.errMsg !== 'getPhoneNumber:ok') {
    } else {
      const { data } = await sheep.$api.third.wechat.getUserPhoneNumber({
        code: e.detail.code,
        platform: 'miniProgram',
        encryptedData: e.detail.encryptedData,
        iv: e.detail.iv,
        sessionId: uni.getStorageSync('sessionId'),
      });
      const { code } = await sheep.$api.user.smsLogin({
        mobile: data,
        code: sheep.$store('app').code,
      });
      if (code == 1) {
        closeAuthModal();
        const userInfo = await sheep.$store('user').getInfo();
        if (!userInfo.surname || !userInfo.daimyo) {
          uni.redirectTo({
            url: '/pages/userData/sex',
          });
        }
        await sheep.$store('AI').setAllSessionList();
        await sheep.$store('AI').setAllFollowList();
        await sheep.$store('family').getList();
        await sheep.$store('family').getFamilyTree();
        const bind_id = computed(() => sheep.$store('AI').bind_id);
        const bind_family_id = computed(() => sheep.$store('AI').bind_family_id);
        if (!!bind_id.value) {
          await sheep.$api.user.bindParent({ parent_id: bind_id.value });
        }
        if (!!bind_family_id.value && !!isLogin.value) {
          const { code } = await sheep.$api.family.applyFamily({ family_id: bind_family_id.value });
          if (code == 1) {
            sheep.$store('AI').setBindFamilyId('');
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';

  .shake {
    animation: shake 0.05s linear 4 alternate;
  }

  @keyframes shake {
    from {
      transform: translateX(-10rpx);
    }
    to {
      transform: translateX(10rpx);
    }
  }

  .register-box {
    position: relative;
    justify-content: center;

    .register-btn {
      color: #999999;
      font-size: 30rpx;
      font-weight: 500;
    }

    .register-title {
      color: #999999;
      font-size: 30rpx;
      font-weight: 400;
      margin-right: 24rpx;
    }

    .or-title {
      margin: 0 16rpx;
      color: #999999;
      font-size: 30rpx;
      font-weight: 400;
    }

    .login-btn {
      color: var(--ui-BG-Main);
      font-size: 30rpx;
      font-weight: 500;
    }

    .circle {
      position: absolute;
      right: 0rpx;
      top: 18rpx;
      width: 8rpx;
      height: 8rpx;
      border-radius: 8rpx;
      background: var(--ui-BG-Main);
    }
  }

  .safe-box {
    height: calc(constant(safe-area-inset-bottom) / 5 * 3);
    height: calc(env(safe-area-inset-bottom) / 5 * 3);
  }

  .tcp-text {
    color: var(--ui-BG-Main);
  }

  .agreement-text {
    color: $dark-9;
  }

  .ss-reset-button {
    ::after {
      display: none;
    }
  }
</style>
